<template>
  <div class="express_details">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <el-form
                ref="formRef"
                :model="data"
                :rules="dataRules"
                label-width="100px"
                class="base_details_form"
                :disabled="readOnly"
              >
                <el-form-item label="自提点名称" prop="name">
                  <el-input v-model="data.name" />
                </el-form-item>
                <el-form-item label="自提点地址" prop="address">
                  <div>
                    <el-input v-model="data.address" />
                    <MapSelectAddress
                      class="selectMap"
                      :position="[data.lng, data.lat]"
                      @select="selectAddress"
                      :disabled="readOnly"
                    />
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">取消</el-button>
        <el-button @click="save" type="primary" v-if="!readOnly"
          >保存</el-button
        >
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref, reactive } from "vue";
import useRoute from "@util/router";
import $ from "@util/base";
import { $msg } from "@ui/msg";
import api from "@api/deliveryStation";
import MapSelectAddress from "@com/MapSelectAddress.vue";

const route = useRoute();

const urlQuery = route.query();
var readOnly = false;
var title = "自提点详情";
$.handleCRU(urlQuery.type, {
  show: () => {
    readOnly = true;
    title = "自提点详情";
    getData();
  },
  add: () => {
    title = "新增自提点";
  },
  modify: () => {
    title = "修改自提点";
    getData();
  },
});

const formRef = ref(null);

const data = reactive({
  id: null,
  name: null,
  address: null,
  lat: null,
  lng: null,
});

function getData() {
  api.details(route.query().code, (val) => {
    data.id = val.id;
    data.name = val.name;
    data.address = val.address;
    data.lat = val.lat;
    data.lng = val.lng;
  });
}

const dataRules = {
  name: [
    {
      required: true,
      message: "请输入自提点名称",
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      message: "请输入自提点地址",
      trigger: "blur",
    },
  ],
};

function selectAddress(addr) {
  data.lat = addr.lat + "";
  data.lng = addr.lng + "";
  data.address = addr.address;
}

function save() {
  formRef.value.validate((valid) => {
    if (valid) {
      if (data.lat == null || data.lng == null) {
        $msg.error("请选择地址");
        return;
      }
      $.handleCRU(urlQuery.type, {
        add: () => {
          api.add(data, () => {
            $msg.succ("添加成功");
            back();
          });
        },
        modify: () => {
          api.update(data, () => {
            $msg.succ("修改成功");
            back();
          });
        },
      });
    }
  });
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.express_details {
  height: 100%;

  .table_tag_box {
    text-align: left;

    .el-tag {
      margin-right: 10px;
    }
  }

  .el-input-number {
    width: 105px;
  }
}
</style>